<!-- 询问医生列表 -->
<template>
	<view class="doctor-list-wrapper">
		<u--input placeholder="输入您要搜索的医生" prefixIcon="search"
			prefixIconStyle="font-size: 22px;color: #909399"></u--input>
		<div style="margin-bottom: 5px;"></div>
		<view class="doctor-item" v-for="(doctor, index) in doctorList" :key="index" @click="goToDoctorDetail(doctor)">
			<view class="left-icon">
				<image :src="doctor.advertisement"></image>
			</view>
			<view class="center-wrapper">
				<p>{{doctor.z_name}}</p>
				<p class="sub-p">{{doctor.keshi}} - {{doctor.hospital}}</p>
				<p class="desc-p">{{doctor.authority}}</p>
				<p></p>
				<view class="toolbar">

				</view>
			</view>
			<view class="right-label" @click="goToDoctorDetail(doctor)">
				<span>问医生</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorList: []
			}
		},
		onLoad(option) {
			this.loadDoctorList(option.deptId)
		},
		methods: {
			loadDoctorList(deptId) {
				this.$app._get('entry/wxapp/zhuanjia.getlistall', {
					id: deptId
				}, (result) => {
					this.doctorList = result
					console.log(result);
				})
			},
			goToDoctorDetail(doctor) {
				uni.navigateTo({
					url: '/pages/onlineInquiry/doctorDetail?zid=' + doctor.zid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doctor-list-wrapper {
		background-color: #fff;


		.doctor-item {
			position: relative;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #EEEEEE;
			background-color: #fff;
			padding: 12px 15px;

			.left-icon {
				width: 50px;
				height: 50px;
				border-radius: 50px;
				background-color: #41C277;
				display: flex;
				flex-direction: row;
				align-items: center;
				text-align: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50px;
				}
			}

			.center-wrapper {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding-left: 10px;
				font-size: 1rem;

				.sub-p {
					font-size: 0.8rem;
					color: #757575;
				}

				.desc-p {
					font-size: 0.7rem;
					color: #757575;
				}
			}

			.right-label {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;

				span {
					font-size: 0.6rem;
					background-color: #41C277;
					color: #fff;
					padding: 5px 7px 5px 7px;
					border-radius: 10px;
				}
			}
		}
	}
</style>